<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <script src="./js/earthsdk.js"></script>
    <!-- 自定义Css样式 -->
    <link rel="stylesheet" href="./css/example1.css" />
    <title>基础场景JSON初始化</title>
    <style>
        html,
        body,
        #app {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script>
        /** ---------------------------------地球创建------------------------------------**/
        // Vue中引入方式：import { ESObjectsManager } from 'earthsdk3';
        const { ESObjectsManager } = window['EarthSDK3']
        const { ESCesiumViewer } = window['EarthSDK3_Cesium']
        const { ESUeViewer } = window['EarthSDK3_UE']

        const objm = new ESObjectsManager(ESCesiumViewer, ESUeViewer);
        window.g_objm = objm;

        // 创建Cesium视口
        const viewer = objm.createCesiumViewer({
            type: 'ESCesiumViewer',
            container: document.getElementById("app"),
        });

        // 监听视口状态
        objm.viewerCreatedEvent.don((v) => {
            // 视口创建完成，飞到初始视角位置
            objm.activeViewer.flyIn(
                [118.36495112794947, 33.78726789197611, 297.73556333908346],
                [156.31665212174508, -36.74645226154754, 359.99926756331877],
                3
            );

            // 监听json加载基础场景配置
            objm.jsonLoadingEvent.don((...args) => {
                if (args.length > 0) {
                    switch (args[0].type) {
                        case "init":
                            console.log("json init");
                            break;
                        case "loading":
                            console.log("json loading");
                            break;
                        case "loaded":
                            console.log("json loaded");
                            break;
                    }
                }
            });

            // 视口初始完成之后，加载json基础场景配置
            objm.json = {
                //版本信息
                asset: {
                    version: "0.1.0",
                    type: "ESObjectsManager",
                    createdTime: "2022-06-17T05:54:41.744Z",
                    modifiedTime: "2023-12-14T08:28:04.290Z",
                    name: "基础场景",
                },
                //viewer的配置信息
                viewers: [],
                //视角管理
                viewCollection: [],
                //场景结构树
                sceneTree: {
                    root: {
                        children: [
                            {
                                name: "新建场景",
                                children: [
                                    {
                                        name: "全球影像",
                                        sceneObj: {
                                            id: "ae103185-08c7-4ed0-b6d4-15ad77bbbf66",
                                            type: "ESImageryLayer",
                                            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                                            name: "全球影像",
                                            allowPicking: true,
                                        },
                                        children: [],
                                    },
                                    {
                                        name: "大楼",
                                        sceneObj: {
                                            id: "3902e5cf-347f-4aed-b93b-15403d310def",
                                            type: "ESGltfModel",
                                            position: [118.36686785706866, 33.78367642657204, 0],
                                            rotation: [55, 0, 0],
                                            name: "大楼",
                                            allowPicking: true,
                                        },
                                        children: [],
                                    },
                                    {
                                        name: "蓝色相机",
                                        sceneObj: {
                                            id: "2dda128c-ab53-4da1-9dc2-f4cd8f8d000c",
                                            type: "ESImageLabel",
                                            position: [
                                                118.36663003144375, 33.78373255739211,
                                                40.54945712869733,
                                            ],
                                            name: "蓝色相机",
                                            allowPicking: true,
                                            size: [40, 50],
                                            anchor: [0.5, 1],
                                            sizeByContent: false,
                                        },
                                        children: [],
                                    },
                                    {
                                        name: "工人",
                                        collapsed: true,
                                        sceneObj: {
                                            id: "bbbcf72e-debf-42e2-a869-9df3386cec43",
                                            type: "ESHuman",
                                            position: [118.36676909184939, 33.78416845980352, 0],
                                            rotation: [30, 0, 0],
                                            scale: [5, 5, 5],
                                            name: "工人",
                                            allowPicking: true,
                                            animation: "walking",
                                        },
                                        children: [],
                                    },
                                    {
                                        name: "绿色相机",
                                        sceneObj: {
                                            id: "5de43eb2-51af-42d2-9755-f40db877d8d2",
                                            type: "ESImageLabel",
                                            position: [
                                                118.36709560635, 33.78383127074738,
                                                52.47675369726872,
                                            ],
                                            name: "绿色相机",
                                            allowPicking: true,
                                            size: [40, 50],
                                            anchor: [0.5, 1],
                                            sizeByContent: false,
                                            url: "inner://CameraGreen.png",
                                        },
                                        children: [],
                                    },
                                    {
                                        name: "电子围栏5",
                                        sceneObj: {
                                            id: "bcfd258c-e7da-463c-890b-c6b8f21f34b4",
                                            type: "ESPolygonFence",
                                            height: 35,
                                            materialMode: "scanline",
                                            name: "电子围栏5",
                                            collision: false,
                                            allowPicking: true,
                                            filled: true,
                                            points: [
                                                [118.36729861205522, 33.78366367319343, 0],
                                                [118.36706072832223, 33.78393032508657, 0],
                                                [118.36685299126403, 33.78378905749879, 0],
                                                [118.36629677598762, 33.78375367247621, 0],
                                                [118.36679825910394, 33.78321700573189, 0],
                                                [118.36679825910394, 33.78321700573189, 0],
                                            ],
                                        },
                                        children: [],
                                    },
                                    {
                                        name: "单箭头路径",
                                        collapsed: true,
                                        sceneObj: {
                                            id: "33a0d189-f95e-4975-a736-7e5d47e9b636",
                                            type: "ESPath",
                                            name: "单箭头路径",
                                            allowPicking: true,
                                            speed: 10,
                                            points: [
                                                [118.36658336916629, 33.7834709991536, 0],
                                                [118.36643641713063, 33.783390648116786, 0],
                                                [118.36555587388335, 33.78435608356367, 0],
                                                [118.3655824979677, 33.784525166024444, 0],
                                                [118.36624276521928, 33.78498612914587, 0],
                                            ],
                                            rotationRadius: [5],
                                        },
                                        children: [],
                                    },
                                    {
                                        name: "光圈特效2",
                                        sceneObj: {
                                            id: "0316924c-05b6-4973-93e7-d90181a1f0ae",
                                            type: "ESApertureEffect",
                                            position: [118.36624665337314, 33.784988078083344, 0],
                                            name: "光圈特效2",
                                            collision: false,
                                            allowPicking: true,
                                            radius: 15,
                                        },
                                        children: [],
                                    },
                                    {
                                        name: "柱状警告",
                                        sceneObj: {
                                            id: "5a800793-cc2e-428d-bc62-eb8d81924742",
                                            type: "ESAlarm",
                                            position: [118.36716350129257, 33.784924461774864, 0],
                                            name: "柱状警告",
                                            collision: false,
                                            allowPicking: true,
                                            radius: 25,
                                        },
                                        children: [],
                                    },
                                ],
                            },
                        ],
                    },
                },
            };

        });
    </script>

    <!-- 切换UE和Cesium引擎的组件（Vue） -->
    <div id="root">
        <switch-engine :objm="objm"></switch-engine>
    </div>
    <!-- Vue文件 -->
    <script src="./js/vue.global.js"></script>
    <!-- 切换UE和Cesium的组件 -->
    <script src="./js/switchEngineCom.js"></script>
</body>

</html>